<!DOCTYPE html>
<html lang="en">

<head>
    <script src="http://cdn.jsdelivr.net/npm/vue@2"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
            <input type="checkbox" class="switch" @click="Switch">
    </div>

</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            Switch: function () {
            }
        }
    })
    
</script>
<style>
    .switch {
        /*去掉浏览器默认渲染*/
        -webkit-appearance: none;
        width: 50px;
        height: 32px;
        border: 1px solid #dfdfdf;
        border-radius: 30px;
        position: relative;
        outline: none;
        transition: linear 0.2s;
    }

    /*伪类*/
    .switch:before {
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #ffffff;
        position: absolute;
        top: 0;
        left: 0;
        /*左右，上下，模糊距离，阴影大小，颜色*/
        box-shadow: 1px 1px 4px 1px #dfdfdf;
        transition: linear 0.2s;
    }

    .switch:checked {
        box-shadow: 0 0 16px 16px #13ce66 inset;
        transition: linear 0.2s;
    }

    .switch:checked:before {
        /*right: 0;不会起作用*/
        left: 20px;
        /*上面不写left=0的时候动画不会起作用*/
        transition: linear 0.2s;
    }
</style>